import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
// 导入登录组件
// fn + 箭头 +ctrl
// import Login from '@/views/Login'
// const Login = () => import('@/views/Login')
// const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/Layout/components/Home')
const Question = () => import('@/views/Layout/components/Question')
const Video = () => import('@/views/Layout/components/Video')
const User = () => import('@/views/Layout/components/User')
const Search = () => import('@/views/Search')
const Result = () => import('@/views/Search/Result')
const Article = () => import('@/views/Article')
const userProfile = () => import('@/views/Layout/components/User/components/userProfile')
const userChat = () => import('@/views/Layout/components/User/components/userChat')
Vue.use(VueRouter)

const router = new VueRouter({
  // 路由规则
  routes: [
    { path: '/login', component: () => import('@/views/Login') },
    {
      path: '/',
      component: () => import('@/views/Layout'),
      children: [
        // meta 是为路由添加源信息 标志位
        { path: '/', component: Home, meta: { isKeepAlive: true } },
        { path: '/question', component: Question },
        { path: '/video', component: Video },
        { path: '/user', component: User }
      ]
    },
    { path: '/search', component: Search },
    { path: '/searchResult', component: Result, name: 'result' },
    // 动态路由参数 路由地址/:参数  路由地址/:占位符名(占位符的名称可以随便起) 相当于在挖坑 -- 相当于params传参在组件中获取也需要使用$route.parms.坑名
    // restful  url/11/22/33
    { path: '/article/:id', component: Article },
    { path: '/userProfile', component: userProfile },
    { path: '/userChat', component: userChat }
  ]
})
// 找到路由原型上的push 重写了一下  vue-router4.x版本中已经处理
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
// to 表示到哪去
// from 表示从哪来
// to 和 from 是路由信息对象
// next() 放行的函数
// console.log(to)
// 路由前置导航守卫
const authLinks = ['/user', '/userInfo', '/cart']
router.beforeEach((to, from, next) => {
  const token = store.state.user.tokenInfo.token
  // 如果登录过.并且要去登录页 不让你去 直接丢到首页
  // if (to.path === '/login' && token) {
  //   next('/')
  //   return
  // }
  // 1. 首先 访问的页面是没有权限的页面  直接放行
  if (authLinks.includes(to.path)) {
  // 有权限的页面 拿token
    // console.log(this.$store.state.user.tokenInfo.token) // 不行 js模块 this并不指向vue实例
    // console.log(store.state.user.tokenInfo.token)

    // 如果有token 直接放行
    if (token) {
      next()
    } else {
      // 没有token还要访问有权限的页面 直接登录
      // next方法底层和push一样 也可以写成对象的方式
      // next('/login')
      // console.log(to) // to 要去的地方,但是因为没有登录 也没有token  login
      next({
        path: '/login',
        query: {
          backTo: to.fullPath //  to.path 指路径的地址 to.fullPath 地址+参数
        }
      })
    }
  } else {
    // 访问没有权限的页面直接放行
    next()
  }
  // 2. 访问的页面是有权限的页面  先拿出来token  有token放行

// --------------------------------------- 明天优化
})

export default router
